<template>
	<view>
		<view :style="'padding-top:'+barHeight+'px'">
			<view class="searchBox">
				<view class="search-ipt" @click="search">
					<image src="../../static/search-img.png" mode=""></image>
					<input type="text" placeholder="请输入关键词">
				</view>
				<image @click="goto('/pagesA/class/class')" src="../../static/cd.png" mode=""></image>
			</view>
		</view>
		
		<view class="swiperBox">
			<u-swiper :list="list1" :radius="10" height="327rpx" keyName="image" @click="thumbinfo"></u-swiper>
		</view>
		<view class="tags-box">
			<text @click="reload" class="all" :class="active == 0 ? 'active': ''">全部</text>
			<view class="roll-box">
				<!-- <text @click="checka(items,index)" v-for="(items,index) in shop" :class="active == index+1 ? 'active': ''"> <image style="width: 32rpx;height: 32rpx;vertical-align: middle;margin-right: 16rpx;" :src="oss(items.image)" mode=""></image> {{items.name}}</text> -->
				
				<view @click="checka(items,index)" v-for="(items,index) in shop" :class="active == index+1 ? 'active': ''">
					<image style="width: 32rpx;height: 32rpx;vertical-align: middle;display:block;margin: auto;" :src="oss(items.image)" mode=""></image>
					<view class="" style="text-align: center;padding-top: 10rpx;">
						{{items.name}}
					</view>
				</view>
			</view>
		</view>
		
		<view class="item-box">
			<view class="each-box" v-for="data in shoplist" @click="toused(data)">
				<view class="img">
					<image class="shop_img" v-if="data.images.length > 0" :src="oss(data.images[0])" mode="aspectFill"></image>
					<image class="video_img" v-if="data.video" style="width: 38rpx;height: 38rpx;" src="../../static/video.png" mode=""></image>
				</view>
				<view class="text-box">
					<view class="title"> <text class="top" v-if="data.switch">置顶</text> {{data.name}} </view>
					<view class="price" v-if="data.price != 0"> <text>{{data.price}}</text> 元</view>
					<view class="price" v-else> <text>面议</text></view>
					<view class="names">
						<image :src="oss(data.user.avatar)" mode=""></image>
						<text>{{data.user.nickname}}</text>
					</view>
				</view>
			</view>
		</view>
		<u-loadmore :status="status" icon-type="flower" bg-color="transperant" margin-top="30" margin-bottom="30" />
		
		<view class="issue" @click="authTo('/pages/newissue/selectIssue')">
			发布信息
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				barHeight:'',
				info:[{image:'https://yikang.ykdjspa.com/uploads/20231124/82b2c4429e520dc48ac6d5091bf490ee.jpg'}],
				shop: [],
				active: 0,
				page: 1,
				item:'',
				shoplist: [],
				lng: '113.754324',
				lat: '34.739681',
				list1:[],
				status: 'loadmore',
				flag: false,
			}
		},
		onLoad() {
			this.barHeight = uni.getSystemInfoSync().statusBarHeight
			this.getcate()
			// this.getlist()
			this.getInfo()
			
			this.shoplist = []
			this.page = 1
			if(this.active == 0) {
				this.getlist()
			} else {
				this.seemore()
			}
		},
		onShow() {
			
		},
		onShareTimeline(){
		    return{
		      title:'买卖二手找半柿，上万件二手物品等你选购，点我',  //分享的标题
		      query:'pages/index/indexa',    //点击分享链接之后进入的页面路径
		      imageUrl:'', // 设置分享卡片图片
		    }
		},
		onReachBottom() {
			console.log('````````````')
			//避免多次触发
			if (this.status == 'loading' || this.status == 'nomore') {
				return;
			}
			this.status = 'loading';
			this.getlist()
		},
		methods: {
			thumbinfo(index){
				if (this.list1[index].url_type == 0) {
					uni.$u.route({
						url: 'pages/common/article',
						params: {
							id: this.list1[index].id
						}
					})
				} else if (this.list1[index].url_type == 1) {
					this.goto(`pages/common/webview?url=${encodeURIComponent(this.list1[index].url)}`)
				} else if (this.list1[index].url_type == 2) {
					// #ifdef MP-WEIXIN
					uni.navigateToMiniProgram({
						appId: this.list1[index].url
					})
					// #endif
				} else if (this.list1[index].url_type == 3) {
				
					var n = this;
					//#ifdef APP-PLUS  
				
					n.sweixin ? n.sweixin.launchMiniProgram({
						id: this.list1[index].url
					}) : plus.nativeUI.alert('当前环境不支持微信操作!');
					//#endif
				}
			},
			getInfo() {
				uni.$u.http.post('/freehome', {
					page: this.page
				}).then(res => {
					if (res.code == 1) {
						this.list1 = res.data.images.map((value) => {
							return {
								...value,
								image: this.oss(value.image)
							}
						})
			
			
					}
				}).catch((res) => {
			
				})
			},
			reload() {
				this.active = 0
				this.shoplist = []
				this.page = 1
				this.finish = false
				this.getlist()
			},
			checka(item, index) {
				this.active = index + 1
				this.item = item
				this.shoplist = []
				this.page = 1
				this.finish = false
				this.seemore()
			},
			getlist() {
				// if (this.finish) {
				// 	return
				// }
				this.flag = false
				this.status = 'loading';
			
				let data = '';
				data = {
					page: this.page,
					lng: '',
					lat: ''
				}
			
				console.log(data)
				uni.$u.http.post('/searchfree', data).then(res => {
					if (res.code == 1) {
						console.log(res)
			
						this.shoplist = this.shoplist.concat(res.data)
						if (res.data.length === 0) {
							this.status = 'nomore';
						} else {
							this.page++
							this.status = 'loadmore';
						}
						this.flag = true
						uni.stopPullDownRefresh();
					}
				}).catch((res) => {})
			},
			seemore(item) {
				// console.log(item)
			
			
				let data = '';
				data = {
					page: this.page,
					word: '',
					cate1_id: this.item.id,
					lng: this.lng,
					lat: this.lat
				}
			
				// console.log(item)
				uni.$u.http.post('/searchfree', data).then(res => {
					if (res.code == 1) {
						console.log(res)
			
						this.shoplist = this.shoplist.concat(res.data)
						if (res.data.length === 0) {
							this.finish = true
						}
					}
				}).catch((res) => {})
			},
			// 获取分类
			getcate() {
				uni.$u.http.post('/freecate').then(res => {
					if (res.code == 1) {
						this.shop = res.data
					}
				}).catch((res) => {
			
				})
			},
			toused(item){
				uni.$u.route({
					url: '/pagesA/index/usedDetail',
					params: {
						id: item.id
					}
				})
				// uni.navigateTo({
				// 	url:'/pagesA/index/usedDetail'
				// })
			},
			search() {
				console.log(1111)
				uni.$u.route({
					url: 'pages/common/searcha'
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F6F6F6;
	}
	.searchBox {
		padding: 0 32rpx;
		display: flex;
		// justify-content: space-between;
		align-items: center;
		.search-ipt {
			padding: 0 32rpx;
			width: 350rpx;
			/* #ifdef APP */
			width: 622rpx;
			/* #endif */
			height: 68rpx;
			background: #FFFFFF;
			border-radius: 39rpx;
			opacity: 1;
			display: flex;
			align-items: center;
			image {
				width: 28rpx;
				height: 28rpx;
				margin-right: 16rpx;
				// margin-left: 32rpx;
			}
		}
		image {
			width: 36rpx;
			height: 36rpx;
			margin-left: 32rpx;
		}
	}
	
	.swiperBox {
		padding: 20rpx;
	}
	.tags-box {
		padding: 0 32rpx 8rpx 32rpx;
		margin-top: 32rpx;
		display: flex;
		align-items: center;
		font-size: 26rpx;
		font-weight: 500;
		color: #333333;
		
		.all {
			display: inline-block;
			width: 200rpx;
		}
		.active {
			font-weight: bold;
		}
		
		.roll-box {
			overflow: hidden;
			overflow-x: auto;
			white-space: nowrap;
			display: flex;
			view {
				margin: 0 16rpx;
			}
			text {
				padding-right: 32rpx;
				padding-left: 32rpx;
			}
			.active {
				font-weight: bold;
			}
		}
	}
	
	.item-box {
		padding: 0 32rpx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		
		.each-box {
			width: 331rpx;
			// height: 460rpx;
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			opacity: 1;
			margin-top: 24rpx;
			
			.img {
				width: 331rpx;
				height: 230rpx;
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				opacity: 1;
				position: relative;
				// background-color: #FA6759;
				
				.shop_img {
					width: 331rpx;
					height: 230rpx;
					border-radius: 24rpx 24rpx 24rpx 24rpx;
				}
				.video_img {
					position: absolute;
					top: 5rpx;
					left: 5rpx;
				}
			}
			
			.text-box {
				padding: 24rpx;
				.title {
					font-size: 28rpx;
					font-weight: 500;
					color: #333333;
					.top {
						font-size: 24rpx;
						font-weight: 500;
						color: #333333;
						padding: 5rpx 8rpx;
						background: #FEBF4E;
						border-radius: 4rpx 4rpx 4rpx 4rpx;
						opacity: 1;
						display: inline-block;
						margin-right: 10rpx;
					}
				}
				.price {
					font-size: 26rpx;
					font-weight: 800;
					color: #FA6759;
					text {
						font-size: 34rpx;
					}
				}
				.names {
					image {
						width: 20rpx;
						height: 20rpx;
						margin-right: 10rpx;
					}
					text {
						font-size: 22rpx;
						font-weight: 500;
						color: #999999;
					}
				}
			}
		}
	}
	
	.issue {
		width: 60rpx;
		height: 60rpx;
		background: linear-gradient(180deg, #FECB6F 0%, #FFAE1C 100%);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		opacity: 1;
		border-radius: 50%;
		font-size: 24rpx;
		font-weight: bold;
		color: #333333;
		padding: 20rpx;
		text-align: center;
		position: fixed;
		right: 32rpx;
		bottom: 200rpx;
	}
</style>